<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>vfd-cloud - 注册</title>

    <!-- Custom fonts for this template-->
    <link th:href="@{/asserts/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link th:href="@{/asserts/css/sb-admin-2.min.css}" rel="stylesheet">

</head>

<body class="bg-gradient-primary">

    <div class="container">

        <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
                    <div class="col-lg-7">
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-4">创建新账户！</h1>
                            </div>
                            <form class="user" id="user_info" method="post" action="/register">
                                <div class="form-group row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="text" class="form-control form-control-user" id="exampleFirstName" name="exampleFirstName"
                                            placeholder="姓">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control form-control-user" id="exampleLastName" name="exampleLastName"
                                            placeholder="名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control form-control-user" id="exampleInputEmail" name="exampleInputEmail"
                                    placeholder="邮箱地址">
                                </div>
                                <!--修改此处，加验证码框-->
                                <div class="form-group row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="text" class="form-control form-control-user"
                                        id="exampleInputVerification" name="exampleInputVerification" placeholder="验证码">
                                    </div>
                                    <div class="col-sm-6">
                                        <input id="bt01" type="button" class="btn btn-primary btn-user btn-block" value="获取验证码"
                                            onclick="sendCode()">
                                    </div>
                                </div>
                                <!--end-->
                                <div class="form-group row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="password" class="form-control form-control-user"
                                            id="exampleInputPassword" name="exampleInputPassword" placeholder="密码">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="password" class="form-control form-control-user"
                                            id="exampleRepeatPassword" name="exampleRepeatPassword" placeholder="重复密码">
                                    </div>
                                </div>
                                <div id="info-tip">
                                    <p style="color: red" th:text="${err}" th:if="${not #strings.isEmpty(err)}"></p>
                                    <p style="color: green" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
                                </div>
                                <a class="btn btn-primary btn-user btn-block" onclick="register();">
                                    注册账户
                                </a>
                                <hr>
                            </form>
                            <hr>
                            <div class="text-center">
                                <a class="small" href="/pages/forgot-password">忘记密码？</a>
                            </div>
                            <div class="text-center">
                                <a class="small" href="/">已经有账户了？登录！</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/asserts/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/asserts/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    <!-- Core plugin JavaScript-->
    <script th:src="@{/asserts/vendor/jquery-easing/jquery.easing.min.js}"></script>

    <!-- Custom scripts for all pages-->
    <script th:src="@{/asserts/js/sb-admin-2.min.js}"></script>

</body>
<script type="text/javascript">
    var count = 60;
    var InterValObj;    //timer变量
    var curCount1;
    function sendCode() {
        curCount1 = count;
        var email = $.trim($('#exampleInputEmail').val());
        var emailReg = /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/;//邮箱正则
        if (!emailReg.test(email)) {
            alert('邮箱格式错误');
            return false;
        }
        $("#bt01").attr("disabled","true");
        $("#bt01").val(+curCount1 + "S 重发");
        InterValObj = window.setInterval(SetRemainTime1,1000);   //启动计时器，每秒一次
        //向后台发送数据
        $.ajax({
            type: "GET",
            url: "/sendCode",
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            data: {email: email},
            success: function (result) {
                if (result === "exitEmail") {       //如果返回数据是exitEmail
                    window.clearInterval(InterValObj);
                    $("#bt01").val("获取验证码");
                    $("#bt01").removeAttr("disabled");//启用按钮
                    alert("这个邮箱已经被使用了哦！");
                } else if (result === "success") {
                    alert("发送成功，请前往邮箱接收");
                    return false;
                } else if (result === "exception") {
                    alert("无效的邮箱");
                } else if (result === "VerificationCodeLengthException") {
                    alert("网站异常，请稍后重试");
                }
                window.clearInterval(InterValObj);//停止计时器
                $("#bt01").removeAttr("disabled");//启用按钮
                $("#bt01").val("重新发送");
                return false;
            },
            error: function (msg) {
                return false;
            }
        });
    }

    function SetRemainTime1() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#bt01").removeAttr("disabled");//启用按钮
            $("#bt01").val("重新发送");
        } else {
            curCount1--;
            $("#bt01").val(+curCount1 + "S 重发");
        }
    }

    function register() {
        document.getElementById('info-tip').innerHTML = "";
        const password = document.getElementById('exampleInputPassword').value;
        const password_re = document.getElementById('exampleRepeatPassword').value;
        if (password !== password_re) {
            document.getElementById('info-tip').innerHTML = "<p style=\"color: red\">两次输入密码不一致</p>"
            return false;
        }
        if (password.length < 10) {
            document.getElementById('info-tip').innerHTML = "<p style=\"color: red\">密码至少10位</p>"
            return false;
        }
        document.getElementById('user_info').submit();
    }
  </script>
</html>